<template>
    <div class="musicPlayPage">
        <div class="bg">
            <div class="bgImg" :style="bg"></div>
            <div class="zhezhao"></div>
            <playpagehead :detail="detail"></playpagehead>
            <div @click="changeisshowpage">
                <record-page v-show="isShowPage" :detail="detail"></record-page>
            </div>
            <record-page-icon v-show="isShowPage" :comment="comment" :detail="detail"></record-page-icon>
            <div @click="changeisshowpage">
                <lyric-page :detail="detail" v-show="!isShowPage"></lyric-page>
            </div>
            <playpagefoot :detail="detail" :musicId="musicId"></playpagefoot>
        </div>
        
    </div>
</template>

<script>
    import playpagehead from "./components/playPageHead.vue"
    import playpagefoot from "./components/playPageFoot.vue"
    import recordPage from "./components/recordPage.vue"
    import recordPageIcon from "./components/recordPageIcon.vue"
    import lyricPage from "./components/lyricPage.vue"
    export default {
        data() {
            return {
                bg:{
                    backgroundImage:""
                },
                isShowPage:true,
                detail:"",
                comment:"",
                musicId:"https://music.163.com/song/media/outer/url?id="+this.$route.params.mid+".mp3" 
            }
        },
        components:{
            playpagehead,
            playpagefoot,
            recordPage,
            lyricPage,
            recordPageIcon
        },
        methods: {
            changeisshowpage(){
                this.isShowPage = !this.isShowPage
            }
        },
        created() {
            //请求歌曲详情
            this.$http.get("/song/detail",{
                params:{
                    ids:this.$route.params.mid
                }
            }).then(res=>{
                console.log(res);
                this.bg.backgroundImage = `url(${res.data.songs[0].al.picUrl})`
                this.detail = res.data;
                console.log(this.detail);
            })

            // 请求歌曲评论
            this.$http.get("/comment/music",{
                params:{
                    id:this.$route.params.mid
                }
            }).then(res=>{
                console.log(res)
                this.comment = res.data
            })
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .musicPlayPage{
        .bg{
             position: relative;
             height: vw(667);
             .bgImg{
                position: absolute;
                width: 100%;
                height: 100%;
                background-size: 300%;
                background-repeat: no-repeat;
                background-position-x: 50%;
                filter: blur(13px);
                z-index: -10;
             }
             .zhezhao{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: #121313;
                    opacity: 0.73;
                    z-index: -1;
            }
        }
    }
</style>